<template>
	<view class="padding_30">
		<view class="account-bg">
			<view class="title" v-if="state==0">
				通用账户
			</view>
			<view class="withdraw-box flex" v-if="state==1">
				<view class="title">
					可提现星光
				</view>
				<view class="withdraw" @click="bindaccount">
					<image src="@/pages/user/static/images/withdraw.png" mode="widthFix"></image>
					<text class="withdraw-account">提现账号</text>
				</view>
			</view>

			<view class="money-account flex">
				<image src="@/pages/user/static/images/bill.png" mode="widthFix"></image>
				<view class="money-total">
					{{userstore.totalMoney}}
				</view>
			</view>
		</view>
		<view class="titlee font_style" v-if="state==0">
			充值星光
		</view>
		<view class="money-select-item" v-if="state==0">
			<view class="select-item" :class="[item.id==currentIndex ? 'active':'']"
				v-for="(item,index) in userstore.rechargeTemplateList" :key="item.id" @click="change(item)">
				<image class="money-img" src="/pages/user/static/images/money.png" mode="widthFix"></image>
				<view class="price" style="flex: 1;">
					{{item.money}}
				</view>
				<view class="price">
					{{item.pay_money}}元
				</view>
			</view>
		</view>
		<view class="titlee font_style" v-if="state==0">
			自定义充值
		</view>
		<view class="titlee font_style" v-if="state==1">
			提现星光（星光>500方可提现）
		</view>
		<view class="diy-price">
			<view class="image-icon" v-if="state==0">
				<image src="/pages/user/static/images/money.png" mode="widthFix"></image>
				<input class="input" type="number" :placeholder="`输入充值数量,最少${minRecharge}星光`" v-model="rechargenum"
					@input="inputChange" />
			</view>
			<view class="image-icon" v-if="state==1">
				<image src="/pages/user/static/images/money.png" mode="widthFix"></image>
				<!-- ${minWithdraw} -->
				<input class="input" style="flex: 1;" type="number" :placeholder="`输入提现数量`"
					v-model="amount" /> 
				<view class="all" style="color: #FE3052;" @click="withdrawAll">
					全部
				</view>
			</view>
		</view>
		<view class="pay-money flex" v-if="state==0">
			<text class="font_style">1元=10星光</text>
			<view style="margin-left: 100rpx;">
				<text class="font_style">支付金额：</text>
				<text class="price">{{rechargenum / 10}}元</text>
			</view>
		</view>
		<view class="pay-money flex" v-if="state == 1">
		    <text class="font_style">扣除软件服务费：{{ (commission * 100).toFixed(2) }}%</text>
		    <view>
		        <text class="font_style">到账金额：</text>
		        <text class="price">{{ ((amount - amount * commission) / 10).toFixed(2) }}元</text>
		    </view>
		</view>

		<view class="flex" v-if="state==0">
			<image style="width: 28rpx;height: 28rpx;" src="@/static/images/no.png" v-if="!ischecked" mode="aspectFill"
				@click="clickAgree"></image>
			<image style="width: 28rpx;height: 28rpx;" src="@/static/images/yes.png" v-if="ischecked" mode="aspectFill"
				@click="clickAgree"></image>
			<view>
				<text style="font-size:24rpx;color: #666;padding-left: 12rpx;">我已阅读并同意</text>
				<text style="font-size:24rpx;color: #FE3052;" @click="toagree('城伴星光服务协议')">《城伴星光服务协议》</text>
			</view>
		</view>
		<view class="btn" v-if="state==0" @click="Recharge">
			立即充值
		</view>
		<view class="withdraw-btns btn" v-if="state==1" @click="withdraw">
			申请提现
		</view>
		<view class="apply-btn" @click="apply" v-if="state==0">
			申请提现
		</view>
		<uv-popup ref="bindRef" mode="center" :round="15" :safeAreaInsetBottom="false">
			<view class="register-popup" style="width: 630rpx;">
				<view class="register-title">
					<view class="title">
						提示
					</view>
					<view class="del-btn" @click="bindRef.close()">
						<image src="/pages/user/static/images/close.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				<uv-parse :content="content"></uv-parse>	
				</view>
				<view class="footer-btn" @click="bind">
					去绑定
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		throttle
	} from '../../../utils/utils';
	const userstore = useUserStore()
	const state = ref(0)
	const bindRef = ref()
	const currentIndex = ref(1)
	const content = ref('')
	const commission = ref(0) //手续费
	const amount = ref('') //输入提现数量
	const rechargenum = ref('') //充值的数量
	const ischecked = ref(false)
	const minRecharge = ref('')
	const minWithdraw = ref('')
	onLoad(() => {
		// 绑定账户信息
		userstore.getAccountBindInfo()
		// 充值模板
		userstore.getRechargeTemplateList()
		// 账户总额
		userstore.getMoneyAmount()
		getMinRecharge()
		getMinWithdraw()
	})
	const change = (item) => {
		currentIndex.value = item.id
		rechargenum.value=item.money
	}
	// 复选框勾选
	const clickAgree = (e) => {
		ischecked.value = !ischecked.value
	}
	const toagree = (text) => {
		uni.navigateTo({
			url: '/pages/login/agreement/index?title=' + text
		})
	}
	// 最低充值星光
	const getMinRecharge = async () => {
		let res = await userstore.getConFig({
			type: 'rechargeMin'
		})
		if (res.code == 200) {
			minRecharge.value = res.data.content
		}
	}
	// 最低体现星光
	const getMinWithdraw = async () => {
		let res = await userstore.getConFig({
			type: 'withdrawalMin'
		})
		if (res.code == 200) {
			minWithdraw.value = res.data.content
		}
	}
	// 申请去提现
	const apply = async () => {
		state.value = 1
		let res = await userstore.getConFig({
			type: 'withdrawalTax'
		})
		if (res.code == 200) {
			commission.value = res.data.content
		}
	}
	// 提取全部
	const withdrawAll = () => {
		amount.value = userstore.totalMoney
	}
	// 提现
	const withdraw = throttle(async () => {
		let res = await userstore.applyWithdraw({
			amount: amount.value
		})
		if (res.code == 200) {
			uni.$uv.toast('申请提现成功')
			amount.value = ''
			userstore.getMoneyAmount()
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/user/submitsuccess/index'
				})
			}, 500)
		}
	}, 200)
	const bind = () => {
		uni.navigateTo({
			url: '/pages/user/bindaccount/index?state=0'
		})
	}
	const bindaccount = async () => {
		if (Object.keys(userstore.accountBindInfo).length == 0) {
			let res = await userstore.getConFig({
				type: 'userAccountTips'
			})
			if (res.code == 200) {
				content.value = res.data.content
				bindRef.value.open()
			}
		} else {
			uni.navigateTo({
				url: '/pages/user/bindaccount/index?state=1'
			})
		}
	}
	// 当选择自定义充值时让模版选项不被选择，template_id传0
	const inputChange = (e) => {
		if (e.detail.value != '') {
			currentIndex.value = 0
		}
	}
	// 充值
	const Recharge = throttle(() => {
		if (!ischecked.value) {
			return uni.$uv.toast('请先勾选《城伴星光服务协议》')
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		uni.login({
			provider: 'weixin', //使用微信登录
			success: async (loginRes) => {
				let result = await userstore.bindOpenid({
					code: loginRes.code
				})
				if (result.code == 200) {
					let params = {
						amount: rechargenum.value == '' ? '100' : rechargenum.value,
						template_id: currentIndex.value,
						type: '1'
					}
					let res = await userstore.userRecharge(params)
					if (res.code == 200) {
						uni.hideLoading()
						uni.requestPayment({
							"provider": "wxpay",
							"appId": res.data.config.appId,
							"nonceStr": res.data.config.nonceStr,
							"package": res.data.config.package,
							"timeStamp": res.data.config.timeStamp,
							"signType": res.data.config.signType,
							"paySign": res.data.config.paySign,
							success: (res1) => {
								console.log(res1)
							},
							fail: (e) => {
								console.log(e)
							}
						})
					}
				}
			}
		})
	}, 200);
</script>

<style lang="scss" scoped>
	.padding_30{

	}
	.account-bg {
		background-image: url('~@/pages/user/static/images/account_bg.png');
		background-size: cover;
		width: 690rpx;
		height: 240rpx;
		padding: 30rpx;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.money-account {
			justify-content: flex-start;
			margin-top: 50rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.money-total {
				margin-left: 20rpx;
				font-weight: 800;
				font-size: 60rpx;
				color: #FFFFFF;
			}
		}
	}

	.titlee {
		padding: 60rpx 0 30rpx 0;
		font-weight: bold;
	}

	// 充值星光
	.money-select-item {
		display: flex;
		align-items: center;
		// justify-content: space-around;
		flex-wrap: wrap;

		.select-item:nth-child(2n) {
			margin-left: 30rpx;
		}

		.select-item {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			padding: 0rpx 20rpx;
			width: 330rpx;
			height: 112rpx;
			background: #F6F6F6;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.money-img {
				width: 32rpx;
				height: 32rpx;
			}

			.price {
				padding-left: 10rpx;
				font-weight: 400;
				font-size: 28rpx;
			}

			&.active {
				background: #FFF1F3;
				color: #FE3052;
				border: 2rpx solid #FE3052;
			}
		}
	}

	.diy-price {
		.image-icon {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F6F6F6;
			padding: 18rpx 0;

			image {
				width: 44rpx;
				height: 44rpx;
			}

			.input {
				width: 400rpx;
				padding-left: 20rpx;
			}
		}
	}

	.pay-money {
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 124rpx;

		.font_style {
			color: #666666;
		}

		.price {
			color: #FE3052;
		}
	}

	.btn {
		margin: 60rpx 0 40rpx 0;
	}

	.apply-btn {
		width: 690rpx;
		height: 100rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 2rpx solid #D8D8D8;
		font-weight: bold;
		font-size: 32rpx;
		color: #666666;
		line-height: 100rpx;
		text-align: center;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.withdraw-btns {
		position: fixed;
		bottom: 30rpx;
	}

	// 提现
	.withdraw-box {
		justify-content: space-between;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.withdraw {
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 26rpx;
			}

			.withdraw-account {
				padding-left: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	// 绑定
	.register-popup {
		padding: 40rpx 30rpx 40rpx 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}

			.del-btn {

				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			padding: 100rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;

			.recharge {

				color: #FE3052;
			}
		}

		.footer-btn {
			height: 88rpx;
			background: #FE3052;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>